<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户登记</title>
  <link rel="shortcut icon" href="记事本_notepad.png" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="component/elementUI/index.css">
  <link rel="stylesheet" href="style/wangeditor.css">
  <link rel="stylesheet" href="style/index.css">
  <style>
    .daon{
      margin-left: 550px !important;
    }
   .zhong{
    background-color: rgb(228, 228, 228);
    margin:20px 20px 0px 20px;
    margin-right: 20px;
    height: 100%;
   }
   .zhongn{
    margin-top: 20px;
    margin-left: 18px;
   }
   .xiangxi{  
    width: 300px;
   }
   .fangshi{
    width: 200px;
   }
   .anniu{
    margin-top: 5px;
    margin-left: 800px;
    padding-bottom: 20px;
   }
   .xia{
    background-color: rgb(228, 228, 228);
    margin:20px 20px;
    height: 623px;
    width: 98%;
   }
   .shuom{
    padding-top: 20px;
    float: left;
    width: 10%;
    height: 100%;
    margin-left: 40px;
   }  
  .ma{
    margin-left: 62px;
    width: 100px;
   }
   .xinxi{
    line-height: 35px;
    color: rgb(126, 125, 125);
    width: 10px;
    height: 10px !important;
   }
   p{
    text-align: center;
    color: rgb(141, 141, 141);
   }
   .shu{
    margin-top: 20px;
    padding-bottom: 50px;
    margin-left: 40px;
    width: 12%;
    float: left;
   }
   .sousk{
    width: 143px;
   }
   .shun{
    background-color: #fffcfc;
    margin-top: 23px;
    height: 466px;
    border: 1px solid #ffffff;
   }
   .biao{
    padding-top: 20px;
    margin-left: 10px;
    float: left;
    width: 72%;
    height: 466px;
    margin-top: -20px;
   }
   .biann{
    border: 1px solid #ebebeb;
    padding: 5px 20px;
   }
   .riq{
    margin-top: 20px;
   }
   .fenye{
    margin-top: 20px;
    margin-left: 400px;
   }
   .canv{
    margin-top: 50px;
    margin-left: 10px;
   }
  </style>
</head>
<body>
  <div id="app">
   

    <!-- 说明 -->
    <div class="xia">
      <div class="shuom" >
        <div class="ma" id="ma"></div>
        <!-- <img id="qrcode-image" alt="QRCode Image" style="display:none;"> -->
        <!-- <img src="商铺码.png" alt="" class="ma"> -->
        <p><i class="el-icon-info"></i>说明</p>
       
        <el-button type="primary" plain class="canv" id="convert-btn" @click="xiazai()">去裁剪并下载</el-button>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<script type="text/javascript" src="utils/wangeditor.js"></script>
<script type="text/javascript" src="utils/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script src="jquery.qrcode.min.js"></script>
<script src="./js/printThis.js"></script>
<script src="./js/printThis.jquery.json"></script>
<script type="text/javascript" src="utils/jquery.cookie.js"></script>
<script type="text/javascript" src="utils/vue.min.js"></script>
<script type="text/javascript" src="utils/vuex.min.js"></script>
<script type="text/javascript" src="component/elementUI/index.js"></script>
<script type="text/javascript" src="component/component.js"></script>
<script type="text/javascript" src="config/config.js"></script>
<script type="text/javascript" src="utils/FileSaver.min.js"></script>
<script type="text/javascript" src="utils/FileSaver.js"></script>
<script type="text/javascript" src="utils/xlsx.full.min.js"></script>
<script type="text/javascript" src="utils/xlsx.core.min.js"></script>
<script type="text/javascript" src="utils/compressor.js"></script>
<script type="text/javascript" src="utils/ID_Validity.js"></script>
<script type="text/javascript" src="utils/utils.js"></script>
<script>
    //    * 获取日期 年-月-日 时:分:秒
//  * @returns {}


  var a = new Vue({
    el: '#app',
    data() {
      return{
        js:{
          name:'',
          pon:'',
          id:'',
        },
        
         }
    },
    mounted(){

      
      $(`#ma`).qrcode({
        width:60, //宽度
        height:60, //高度
        text:`https://marketing.xiaokanglongjiang.com/dist/shequyingxing/shou.html?`, //内容
        typeNumber:-1, //计算模
        correctLevel:2, //二维码纠错级别
        background:"#fff", //背景额色
        foreground:'#898888' //二维码额色
      })

            $('#convert-btn').click(()=> {

    //           const pElement = document.getElementById('ma').innerHTML; // 替换为指定的 DOM 元素 ID
    //           console.log(pElement);
              
    // this.printHtml(pElement)
    // const WindowPrt = window.open('', '打印', 'width=' + (screen.availWidth - 10) + ',height=' + (screen.availHeight - 50) + ',left=0,top=0,location=0,menubar=0,toolbar=0,scrollbars=0,status=0'); // 裸全屏
    //     WindowPrt.document.head.innerHTML = window.document.head.innerHTML // 加入当前所有头 - 以防样式丢失
    //     WindowPrt.document.body.innerHTML = document.getElementById('ma').innerHTML; // 载入指定body
    //     WindowPrt.print() // 调用打印
    //     WindowPrt.close() // 自动等待print结束后执行
//               const copiedElement = pElement.cloneNode(true);
// window.print(copiedElement);

// // 在打印事件中进行设置
// window.addEventListener('beforeprint', () => {
//   element.style.display = 'block'; // 确保元素显示
// });

// window.addEventListener('afterprint', () => {
//   element.style.display = 'none'; // 打印后恢复元素的原始显示状态
// });

//               window.print()
// $('#ma').printThis({
//   importCSS: true, // 是否导入 CSS
//   loadCSS: "", // 加载的 CSS 文件路径
//   pageTitle: "", // 页面标题
//   removeInline: false, // 是否移除内联样式
// });
                // 获取二维码的 canvas 元素
              //   var canvas = $('#ma canvas')[0];
              //   // 将 canvas 内容转换为 base64 编码的 URL
              // console.log('aaa-click',canvas)
              // var imgData = canvas.toDataURL('image/png');
              //   // // 设置到 img 标签的 src 属性中
              //   // $('#qrcode-image').attr('src', imgData);
              //   // // 显示图片
              //   // $('#qrcode-image').show();

              //   // 创建一个 img 元素来显示二维码（可选）
              //   var img = $('<img>').attr('src', imgData).css('display', 'none');
              //   // 将 img 元素添加到 DOM 中（但在这里我们选择不显示它）
              //   // $('body').append(img); // 如果不需要显示，可以不添加这一行
 
              //   // 可选：创建一个下载链接
              //   var downloadLink = $('<a>')
              //       .attr('href', imgData)
              //       .attr('download', 'ma.png')
              //       .text('Download QR Code');
              //   $('body').append(downloadLink);
              //   downloadLink[0].click();
 
              //   // 移除下载的链接和（可选的）img 元素
              //   downloadLink.remove();
                // 如果添加了 img 元素到 DOM 中并且现在想要移除它，也需要执行 img.remove();
            });

    //   // 获取canvas Dom
    // const canvas = document.getElementById("ma");
    // // 创建画笔
    // const ctx = canvas.getContext('2d')
    // // 设置矩形
    // ctx.fillRect(0, 0, 500, 500)
    
    // // 创建img
    // const img = document.createElement("img")
    // // 设置宽高
    // img.width = canvas.width
    // img.height = canvas.height

    // // 使用 toDataURL 将canvas转换成base64格式的图片
    // img.src = canvas.toDataURL()
    // // 追加到body中 页面显示
    // document.body.appendChild(img)

    },
    methods: {
  printHtml(html) {
  const style = this.getStyle();
  const container = this.getContainer(html);

  document.body.appendChild(style);
  document.body.appendChild(container);

  this.getLoadPromise(container).then(() => {
    window.print();
    document.body.removeChild(style);
    document.body.removeChild(container);
  });
},

// 设置打印样式
 getStyle() {
  const styleContent = `#print-container {
    display: none
}
@media print {
    body > :not(.print-container) {
        display: none
    }
    html,
    body {
        display: block !important;
    }
    #print-container {
        display: block
    }
    @page {
      margin: 0mm;
    }
}`;
  const style = document.createElement("style");
  style.innerHTML = styleContent;
  return style;
},

// 清空打印内容
 cleanPrint() {
  const div = document.getElementById("print-container");
  if (div) {
    document.querySelector("body").removeChild(div);
  }
},

// 新建DOM，将需要打印的内容填充到DOM
 getContainer(html) {
  this.cleanPrint();
  const container = document.createElement("div");
  container.setAttribute("id", "print-container");
  container.innerHTML = html;
  return container;
},

// 图片完全加载后再调用打印方法
 getLoadPromise(dom) {
  let imgs = dom.querySelectorAll("img");
  imgs = [].slice.call(imgs);

  if (imgs.length === 0) {
    return Promise.resolve();
  }

  let finishedCount = 0;
  return new Promise((resolve) => {
    function check() {
      finishedCount++;
      if (finishedCount === imgs.length) {
        resolve();
      }
    }
    imgs.forEach((img) => {
      img.addEventListener("load", check);
      img.addEventListener("error", check);
    });
  });
},
      
      xiazai(){
      //   const a = document.createElement('a') // 动态创建a标签
      //   a.download = '二维码下载' // 下载名称
      //   a.href = img.src     // 设置下载路径
      // const element = document.getElementById('ma')

      $(document).ready(function() {
        $(`#ma`).printThis({
        importCSS: true,
        loadCSS: "",
        pageTitle: "",
        removeInline: false
      });
});


     
      },



      getList(){
        $.ajax({
          headers:{
            'Content-Type':'application/x-www-form-urlencoded',
            Accesstoken:'eyJraWQiOiJteS1rZXktaWQiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxNTA0NjAwNjEyMCIsImF1ZCI6ImFwaS5leGFtcGxlLmNvbSIsImlzcyI6ImF1dGguZXhhbXBsZS5jb20iLCJVc2VySW5mbyI6eyJVc2VyTmFtZSI6IjE1MDQ2MDA2MTIwIn0sImV4cCI6MTczMTM3ODEwMSwiaWF0IjoxNzMxMzc0NTAxLCJqdGkiOiI3ZGQ3YTI1NC1hZjI4LTRjZjUtYmZjNi0wMzdiZGVmZDlmNjQifQ.ZYwrr1ETpJCNTy55VObFrmyzYGmhri95soouGqGmVpweHMHsE2j7buSdCJDP0mxlNnhu4e8Kk0pK8Sa4pHAddT8RVD5PXl2I2gCDyzCcI5hSmxbiuNETTJrXqAtTw4WVCHWW4H3VHHfC1RdH0WRM0dfWalUrZ8qUPDRQcl0BXiiZ0wAQ8BW3LoZlFPddg5ShPOt6BpSBg71oo_pGAMY3QxY6rd5ibh4R347e2cc8xVf2OMAKFVXtjX_yZFKIW8A_MU0InvCJGzXcNT8jUR2xkTAsOIAp-OYO_Tsppn-pKXgFvRTvBQHN-Yx9BH74QqXH6mun3Kdcky0q31Nt3WcV0w',
          },
          url: 'https://service2.ediblefungus.cn/zhaobo/generalBusiness/generalQueryByTableNameWithOriginal',
            type: 'POST',
            data:{       
              RowAmount: 10,            //  传给后台的参数
              Data:'usertable',
              Condition:""
          },
          success:(usertable)=>{
            this.tableData = usertable
          },
       })
      },
      
      },
  })
</script>
</html>